<script lang="ts" setup>
import { getArrMaxIndex } from '@vc/utils';
import { type EnvironmentalSupervisionProps } from '../../../apis';
import { INIT_PARAMS, PAGE_SIZE } from '../../../constants';
import { useF9Context } from '../../../use/use-context';
import { ModuleEnum } from '../constants';
import { useTable } from '../useTable';
import PageHeader from '../../../components/page-header.vue';

interface Props {
  /** 标题名称 */
  title: string;
  /** 标题 id */
  menuId: string;
  /** 数值 */
  count: number;
  /** 模块信息 */
  info: any;
}

const { title, menuId, info, count } = defineProps<Props>();
const { api, name: moduleName, modalTitle } = info;
let pageNum = $ref(1);

/** 注销 */
const isLogout = title === ModuleEnum.REVOKE_THE_LOGOUT;
const { companyId } = useF9Context();
const requestParams = reactive<EnvironmentalSupervisionProps>({
  id: companyId,
  ...INIT_PARAMS,
  sortRule: '',
  type: ''
});

let version_value = $ref<number[]>([]);

const {
  data: tableData,
  run,
  loading,
  error
} = useRequest(api, {
  defaultParams: [{ ...requestParams, pageNum }],
  onSuccess: (res: Record<string, any>) => {
    if (moduleName === ModuleEnum.REGISTRATION_INFORMATION) {
    	for (const item of res.values) {
    	  for (const sub_item of item.changes) {
          version_value.push(sub_item?.version);
    	  }
    	}
    }
  }
});

const { columns, showDetailModal, detailsColumn, detailsTableData } = useTable(moduleName, getArrMaxIndex(version_value));

const handleCurrentChange = (data) => {
  pageNum = data;
  run({ ...requestParams, pageNum });
};

const sortChange = (data) => {
  requestParams.sortRule = data.order ? data.field + ':' + data.order : '';
};

watch(
  () => requestParams,
  (val) => {
    pageNum = 1;
    run({ ...val, pageNum });
  },
  {
    deep: true
  }
);

const activeTab = ref('');

const logoutTabs = reactive([
  { name: '全部', value: '' },
  { name: '排污许可证撤销', value: 1 },
  { name: '排污许可证注销', value: 2 },
  { name: '排污许可证遗失', value: 3 }
]);

const handleTabChange = (data) => {
  requestParams.type = data;
};
</script>

<template>
  <page-header class="mt-18px mb-15px" :count="count" :title="title" :menuId="menuId" is-small />
  <vc-empty-fail @click="run({...requestParams, pageNum})" v-if="error" />
  <div class="container" v-else>
    <vc-tabs v-if="isLogout" :model-value="activeTab"  @tab-change="handleTabChange"
      type="card" class="inline-block descriptions w-full mb-6px">
      <vc-tab-pane v-for="(item, index) in logoutTabs" :key="index"
        :label="item.name" :name="item.value" />
    </vc-tabs>
    <vc-table
      :loading="loading"
      :tableData="tableData?.values"
      :columns="columns"
      :total="tableData?.total"
      :pageSize="PAGE_SIZE"
      v-model:pageNum="pageNum"
      @page-change="handleCurrentChange"
      @sort-change="sortChange"
    />
  </div>
  
  <vc-dialog  :height="430"  v-model="showDetailModal" :title="`${modalTitle + detailsTableData.length}次`" :width="800">
    <div class="detail-table">
      <vc-table :height="350" :columns="detailsColumn" :tableData="detailsTableData" />
    </div>
  </vc-dialog>
</template>

<style lang="scss" scoped>
.detail-table {
  padding: 20px 15px;
}
</style>
